import React from 'react';
import './city.scss';
import axios from 'axios'
import Header from './components/Header'
import List from './components/List'
import Alphabet from './components/Alphabet'
import { connect } from "react-redux"
import { addcityList } from "../../redux/./citylist/action."

class City extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cityList: [],
      curKey: '',
      aflag: true,
      iTime:''
    }
  }
  componentDidMount() {
    this.getCityList();
  }
  getCityList() {
    axios.get('http://localhost:8088/data').then(res => {
      this.setState({
        cityList: res.data
      })
    })
  }
  handleBack() {
    this.props.changeChouti()
    // console.log(this.props)
  }
  handleChangeCity(item){
    clearTimeout(this.state.iTime);
    this.state.iTime = setTimeout(()=> {
      this.state.aflag = false
      console.log(this.props)
      this.props.addcityList(item)
      this.props.changeChouti()
      this.setState({})
    }, 100);
  }
  handleAlphabetClick(key) {
    if (key !== this.state.curKey) {
      this.setState({
        curKey: key
      })
    }
  }
  render() {
    let keyList = this.state.cityList.cities && Object.keys(this.state.cityList.cities);
    console.log(this.state.cityList)
    return (
      <div id="chouti" className="city" style={{ backgroun: 'yellow' }}>
        <Header handleBack={this.handleBack.bind(this)} />
        <List
          list={this.state.cityList}
          curKey={this.state.curKey}
          handleChangeCity={this.handleChangeCity.bind(this)} />
        <Alphabet
          flag={this.props.flag}
          list={keyList}
          onClick={this.handleAlphabetClick.bind(this)} />
      </div>
    );
  }
}

export default connect(
  state => ({
    city: state.citylist
  }),
  {
    addcityList:addcityList
  }
)(City)
